<template>
  <div style="margin-top: 20px">
    <transition name="el-fade-in-linear">
      <div v-if="show" class="transition-box">
        <div>
          <el-breadcrumb
            style="margin: 5px 0px 0px 30px"
            separator-class="el-icon-arrow-right"
          >
            <el-breadcrumb-item :to="{ path: '/userInformation' }"
              >首页</el-breadcrumb-item
            >
            <el-breadcrumb-item>店铺管理</el-breadcrumb-item>
            <el-breadcrumb-item>订单列表</el-breadcrumb-item>
          </el-breadcrumb>
          <table border="0" style="margin: 50px auto 0px" cellspacing="0">
            <tr>
              <th>订单编号</th>
              <th>订单状态</th>
              <th>订单金额</th>
              <th>订单时间</th>
              <th>送货地址</th>
              <th colspan="2" style="width: 153px">操作</th>
            </tr>
            <tr
              v-for="(item, index) in newOrderList"
              :key="index"
              style="height: 120px"
            >
              <td style="text-align: center; width: 260px">
                {{ item.ordersn }}
              </td>
              <td style="text-align: center; width: 80px">
                {{
                  item.orderstate == 3
                    ? "已发货"
                    : item.orderstate == 2
                    ? "已支付"
                    : "未支付"
                }}
              </td>
              <td
                v-for="(item2, index2) in item.orderdetaillis"
                :key="index2"
                style="text-align: center; width: 80px"
              >
                <div></div>
              </td>
              <td style="text-align: center; width: 100px">
                {{ item.totalmoney }}
              </td>
              <td style="text-align: center; width: 200px">
                {{ item.ordertime | formatDate }}
              </td>
              <td>{{ item.sendaddress }}</td>
              <td style="text-align: center">
                <button
                  slot="reference"
                  style="
                    width: 75px;
                    float: right;
                    background-color: #e31939;
                    color: white;
                  "
                  @click="openDialog(item)"
                >
                  发货
                </button>
                <el-dialog
                  title="提示发货"
                  :visible.sync="centerDialogVisible"
                  width="30%"
                  center:true
                >
                  <p>订单号:{{ openValue.ordersn }}?</p>
                  <p>地址:{{ openValue.sendaddress }}?</p>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="centerDialogVisible = false"
                      >取 消</el-button
                    >
                    <el-button
                      type="primary"
                      @click="deliver(openValue.orderId)"
                      >确 定</el-button
                    >
                  </span>
                </el-dialog>
              </td>
              <td>
                <button
                  @click="det(item)"
                  style="
                    width: 75px;
                    float: right;
                    background-color: #e31939;
                    color: white;
                  "
                >
                  详情
                </button>
              </td>
            </tr>
            <tr>
              <td colspan="7" style="background-color: #fff">
                <el-pagination
                  style="text-align: center"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page.sync="currentPage1"
                  :page-size="10"
                  layout="total, prev, pager, next"
                  :total="orderList.length"
                >
                </el-pagination>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div class="showLogin" v-else>
        <img src="../../assets/loginImage.gif" alt="login" />
      </div>
    </transition>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {},
      orderList: [],
      newOrderList: [],
      currentPage1: 1,
      show: false,
      openValue: {},
      centerDialogVisible: null,
    };
  },
  created() {
    this.getUser();
    this.getUserList();
  },
  mounted() {},
  methods: {
    // 提示消息
    open2() {
      this.$message({
        message: "发货成功！",
        type: "success",
      });
    },
    open4() {
      this.$message.error("发货失败！请稍后重试！");
    },
    getUser() {
      this.user = JSON.parse(window.sessionStorage.getItem("user"));
    },
    getUserList() {
      // 请求列表
      this.$http
        .get(
          "FoodWeb/getOrderListAction.action",
          { params: { userid: this.user.userId, token: this.user.token } },
          { dataType: "json" }
        )
        .then((res) => {
          let undeLivered = new Array();
          res.data.orderList.forEach((v) => {
            if (v.orderstate < 3) {
              undeLivered.push(v);
            }
          });
          this.orderList = undeLivered.reverse();
          this.newOrderList = undeLivered.slice(0, 10);
          this.show = true;
          console.log(res);
        });
    },
    handleCurrentChange(res) {
      // 分页列表
      this.newOrderList = this.orderList.slice(res * 10 - 10, res * 10);
      console.log(res);
    },
    handleSizeChange(res) {
      // 返回当前页
      console.log(res);
    },
    openDialog(v) {
      this.centerDialogVisible = true;
      this.openValue = v;
    },
    deliver(res) {
      this.centerDialogVisible = false;
      // 发货
      let that = this;
      this.$http
        .get("FoodWeb/fahuoAction.action", {
          params: {
            orderid: res,
            userid: that.user.userId,
            token: that.user.token,
          },
          Headers: { "content-type": "json" },
        })
        .then((sult) => {
          if (sult.data.errorcode == 0) {
            that.open2();
            setTimeout(() => {
              location.reload();
            }, 2000);
          } else {
            that.open4();
          }
        });
    },
    det(res) {
      window.sessionStorage.setItem("order", JSON.stringify(res));
      this.$router.push({ path: "/shopDetails" });
      // ,query:{'ord':res}
      // 详情
      // this.$http
      //   .get("FoodWeb/deleteFoodAction.action", {
      //     params: {
      //       foodid: meet.foodId,
      //       userid: this.user.userId,
      //       token: this.user.token,
      //     },
      //   })
      //   .then((result) => {
      //     if (result.data.errorcode == 0) location.reload();
      //   });
    },
  },
};
</script>

<style lang="less" scoped>
// table tr:nth-child(even) {
//   background: #f8f8f8;
// }
.showLogin {
  width: 400px;
  margin: 50px auto 0px;
}
</style>